<template>
  <div class="page">
    <div class="page-container">
			<Header activeId="7" />
			<div class="content">
        <Bread :data="[{text: '首页', href: '/'}, {text: '在线服务', href: '/srvice'}, {text: '我的预约'}]" />
        <div class="paner">
          <div class="paner-header">
            <b-form class="paner-form">
              <b-row class="justify-content-md-start">
                <b-col xs="12" sm="6" lg="3">
                  <div class="form-groups">
                    <label class="form-groups-label">日期：</label>
                    <div class="form-groups-content">
                      <b-form-datepicker v-model="form.date" placeholder="请选择日期"></b-form-datepicker>
                    </div>
                  </div>
                </b-col>
                <b-col xs="12" sm="6" lg="3">
                  <div class="form-groups">
                    <label class="form-groups-label">身份证号：</label>
                    <div class="form-groups-content">
                      <b-form-input
                        v-model="form.idcards"
                        type="text"
                        placeholder="请输入身份证号"
                        required
                      ></b-form-input>
                    </div>
                  </div>
                </b-col>
                <b-col xs="12" sm="6" lg="3">
                  <div class="form-groups">
                    <label class="form-groups-label">手机号：</label>
                    <div class="form-groups-content">
                      <b-form-input
                        v-model="form.phonenumber"
                        type="text"
                        placeholder="请输入手机号"
                        required
                      ></b-form-input>
                    </div>
                  </div>
                </b-col>
                <b-col xs="12" sm="6" lg="3">
                  <div class="form-groups">
                    <b-button @click="handleQuery" variant="primary">查询</b-button>
                  </div>
                </b-col>
              </b-row>
            </b-form>
          </div>
        </div>
        <b-row v-if="list.length" class="justify-content-md-start">
          <b-col v-for="(item, i) in list" :key="i" xs="12" sm="6" lg="4">
            <b-card
              title="5月免费参观活动"
              tag="article"
              style="width:100%"
              class="mb-4"
            >
              <div class="card-text">
                <div>活动时间：2024-05-01——2024-05-03</div>
                <div>每个预约人数限制为3人</div>
                <div>预约只能使用一次，超过时间作废</div>
                <div>预约时需指定来访时间</div>
              </div>
              <div class="text-right">
                <a href="/service/item" class="btn btn-outline-primary">查看</a>
              </div>
            </b-card>
          </b-col>
        </b-row>
        <Empty v-else />
        <!-- <div style="display:flex;justify-content: center">
          <b-pagination
            v-model="currentPage"
            :total-rows="total"
            :per-page="perPage"
            @change="handleQuery"
            aria-controls="my-table"
          ></b-pagination>
        </div> -->
			</div>
      <Footer />
		</div>
	</div>
</template>

<script>
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'
import Bread from '@/components/bread.vue'
import Empty from '@/components/empty.vue'

export default {
	components: {
    Header,
    Footer,
    Bread,
    Empty
	},

  data () {
    return {
      form: {},
      perPage: 12,
      currentPage: 1,
      total: 0,
      list: []
    }
  },

  mounted () {
    this.loadData()
  },

  methods: {
    // 查询
    handleQuery () {
      this.loadData()
    },
    // 加载数据
    loadData () {
      this.queryListData().then(res => {
        let data = res.data
        let rows = data.data
        rows = Array.isArray(rows) ? rows : []
        this.total = data.total
        this.list = rows
      })
    },
    // 查询数据
    queryListData () {
      return this.$service.service.queryListAll({
        pageIndex: this.currentPage,
        pageSize: this.perPage
      }, {$http: this.$axios})
    }
  }
}
</script>

<style lang="less" scoped>
.paner {
  margin-bottom: 8px;
  .paner-form {
    flex: 1;
  }
  .form-groups {
    display: flex;
    align-items: center;
    margin: 4px 0;
    .form-groups-label {
      margin-bottom: 0;
      width: 80px;
      text-align: right;
    }
    .form-groups-content {
      flex: 1;
    }
  }
}
.card-text {
  color: #666;
}
</style>
